/*
 * @Author: Caijw
 * @Date: 2018-11-27 20:35:52
 * @LastEditors: Caijw
 * @LastEditTime: 2018-12-16 10:39:35
 * @Description: 周边列表
 */
import React, { Component } from 'react';
import Header from '../../../components/Header/ShareHeader';
import {Link,NavLink} from 'react-router-dom';
import { connect } from "react-redux";
import {withRouter} from 'react-router-dom';
import { Toast } from 'react-weui';
import * as actions from '../../../store/action/ambitus';
import '../../../static/css/common.less';
import './detail.less';

class AmbitusDetail extends Component {

    componentWillMount = () =>{
        this.id = this.props.match.params.id;
        this.props.fetchAmbitusDetail(this.id);
    }

    openApp = () =>{
        window.location.href = 'http://huiyouduoapp.com/';
    }

    render() {
        return (
            <div>
                 <Toast icon="loading" show={this.props.ambitus.fetching}>Loading...</Toast>
                <div className="detail-region">
                    <Header title={this.props.ambitus.detail.name}></Header>
                    <section class="content detail-content1">
                        <div className="pic"><img src={this.props.ambitus.detail.cover}></img></div>
                        <div className="product-item-detail">
                                    <div className="title">{this.props.ambitus.detail.name}</div>
                                    <div className="address">店铺地址：{this.props.ambitus.detail.address}</div>
                                    <div className="phone">店铺电话：{this.props.ambitus.detail.phone}</div>
                                    {/* <div className="type">家具</div> */}
                                    {/* <div className="len">距离您100m</div> */}
                                    <div className="plus">{this.props.ambitus.detail.promotion_text}</div>
                                    <div className="point"><img src={require('../../../static/images/point.png')}></img></div>
                                    <div className="phone-ico"><img src={require('../../../static/images/phone.png')}></img></div>
                        </div>
                        <div className="actives-tiele">
                            <div className="pic-img"></div>
                            <span className="title">店铺活动</span>
                        </div>
                        <div className="first-content">
                            {this.props.ambitus.detail.activities.length>0?
                                <NavLink to={"/activity/"+this.id}>
                                    <div className="first-ico"><img src={this.props.ambitus.detail.activities[0].cover}></img></div>
                                    <div className="first-title">{this.props.ambitus.detail.activities[0].title}</div>
                                    <div className="first-time">{this.props.ambitus.detail.activities[0].created_at}</div>
                                </NavLink>
                                :<div className="no-activity">暂无活动</div>
                            }
                        </div>
                        <div className="actives-tiele">
                            <div className="pic-img"></div>
                            <span className="title">招聘信息</span>
                        </div>
                        <NavLink to={"/recruit/"+this.id}>
                        <div className="actives-content">{this.props.ambitus.detail.recruitment_text}</div>
                        </NavLink>
                        <button className="submit-btn" onClick={this.openApp}>打开App<i className="money-ico"></i></button>
                    </section>
                </div>
            </div>
        )
    }
}

export default withRouter(connect((state)=>{return {...state}}, actions)(AmbitusDetail));
